<template>
  <!-- 公共厕所 -->
  <div class="content-grid">
    <panelBox title="设施类型">
      <v-chart class="chart" :option="option1" autoresize />
    </panelBox>
    <panelBox title="惠民回收服务点">
      <div class="card-flex">
        <div
          class="circle-box-item"
          :style="{ marginRight: index == module_4.length - 1 ? '0' : '40px' }"
          v-for="(item, index) in module_4"
          :key="index"
        >
          <div class="circle-box">
            <div
              class="circle-inner circle-inner1"
              :style="{ borderColor: item.color, color: item.color }"
            >
              <div class="count" :style="{ color: item.color }">
                {{ item.count }}个
              </div>
              <div
                class="percentage"
                :style="{ 'background-color': item.color }"
              >
                {{ item.baifenbi }}
              </div>
            </div>
          </div>
          <div class="circle-inner-text">{{ item.name }}</div>
        </div>
      </div>
    </panelBox>
    <panelBox title="运营企业">
      <v-chart class="chart" :option="option3" autoresize />
    </panelBox>
    <panelBox title="可回收中转站">
      <div class="card-flex">
        <div
          class="circle-box-item"
          :style="{ marginRight: index == module_5.length - 1 ? '0' : '40px' }"
          v-for="(item, index) in module_5"
          :key="index"
        >
          <div class="circle-box">
            <div
              class="circle-inner circle-inner1"
              :style="{ borderColor: item.color, color: item.color }"
            >
              <div class="count" :style="{ color: item.color }">
                {{ item.count }}个
              </div>
              <div
                class="percentage"
                :style="{ 'background-color': item.color }"
              >
                {{ item.baifenbi }}
              </div>
            </div>
          </div>
          <div class="circle-inner-text">{{ item.name }}</div>
        </div>
      </div>
    </panelBox>
    <div id="map-box" class="map-box">123</div>
    <panelBox title="开放状态" style="grid-area: 3 / 1 / 3 / 3">
      <div class="pie-box">
        <div class="pie-box-item">
          <v-chart class="chart" :option="option5" autoresize />
          <div class="chart-title" v-if="module3Data.length > 0">
            {{ module3Data[0].name }}
          </div>
        </div>
        <div class="pie-box-item">
          <v-chart class="chart" :option="option6" autoresize />
          <div class="chart-title" v-if="module3Data.length > 1">
            {{ module3Data[1].name }}
          </div>
        </div>
        <div class="pie-box-item">
          <v-chart class="chart" :option="option7" autoresize />
          <div class="chart-title" v-if="module3Data.length > 2">
            {{ module3Data[2].name }}
          </div>
        </div>
      </div>
    </panelBox>
    <panelBox title="可回收物集散场">
      <div class="card-flex">
        <div
          class="circle-box-item"
          :style="{ marginRight: index == module_6.length - 1 ? '0' : '40px' }"
          v-for="(item, index) in module_6"
          :key="index"
        >
          <div class="circle-box">
            <div
              class="circle-inner circle-inner1"
              :style="{ borderColor: item.color, color: item.color }"
            >
              <div class="count" :style="{ color: item.color }">
                {{ item.count }}个
              </div>
              <div
                class="percentage"
                :style="{ 'background-color': item.color }"
              >
                {{ item.baifenbi }}
              </div>
            </div>
          </div>
          <div class="circle-inner-text">{{ item.name }}</div>
        </div>
      </div>
    </panelBox>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import panelBox from "./components/panel-box.vue";
import { recyclableSitesStatistics } from "@/api/recyclable_sites";
const configListData = ref([]);
const ListData = ref([]);
const is_cli_map = ref(0);
let map;

const props = defineProps({
  streetId: {
    type: Number,
    default: null,
  },
});
defineOptions({
  name: "RecyclingStation",
});

const module3Data = ref([
  {
    name: "1",
    statistics: [],
  },
  {
    name: "2",
    statistics: [],
  },
  {
    name: "3",
    statistics: [],
  },
]);
const module_4 = ref([]);
const module_5 = ref([]);
const module_6 = ref([]);
onMounted(() => {
  getData(props.streetId);
});

const map_init = () => {
  map = new BMapGL.Map("map-box");
  var point = new BMapGL.Point(
    configListData.value[0].map_center_longitude,
    configListData.value[0].map_center_latitude
  );
  map.centerAndZoom(point, configListData.value[0].map_default_zoom);
  map.enableScrollWheelZoom(true);
  map.clearOverlays();
  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);

  let list = ListData.value;
  for (var i = 0; i < list.length; i++) {
    // 使用立即执行函数创建闭包，避免循环变量引用问题
    (function(item, index) {
      // 创建当前标记的坐标点
      const currentPoint = new BMapGL.Point(item.longitude, item.latitude);
      
      // 创建自定义图标
      let img = "";
      if (item.attribute == "正式") {
        img = "zhengchang.png";
      } else {
        img = "guihua.png";
      }
      var marker = new BMapGL.Marker(currentPoint);
      map.addOverlay(marker);
      
      // 创建信息窗口内容
      var opts = {
        width: 250,
        height: 80,
        offset: new BMapGL.Size(0, -30) // 向上偏移，避免被标记遮挡
      };
      var infoContent = `<div style="padding: 5px;font-size:18px;">${item.name || '未知'}</div>`;
      var infoWindow = new BMapGL.InfoWindow(infoContent, opts);
      
      // 添加点击事件，使用闭包中的currentPoint
      marker.addEventListener('click', function () {
        map.openInfoWindow(infoWindow, currentPoint);
      });
    })(list[i], i);
  }
};
const getData = async (id = null) => {
  let res = await recyclableSitesStatistics({ street_id: id });
  console.log(res);
  if (res.code == 0) {
    handleData1(res.data.module_1);
    handleData3(res.data.module_2);
    module_4.value = res.data.module_6;
    module_5.value = res.data.module_5;
    module_6.value = res.data.module_4;
    let top = res.data.module_3.top;
    let module_3_data = res.data.module_3.content.map((item) => {
      item.statistics.map((item2, index2) => {
        item2.name = top[index2].name;
        return item2;
      });
      return item;
    });
    module3Data.value = module_3_data;
    handleData5(module_3_data);
    handleData6(module_3_data);
    handleData7(module_3_data);

    ListData.value = res.data.map || [];
    configListData.value = res.config || [];
    map_init();
  }
};
const handleData1 = (data) => {
  console.log(data);
  option1.value.xAxis.data = data.map((item) => item.name);
  option1.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      label: {
        show: true,
        position: "top",
        color: item.color,
        fontSize: 18,
      },
      itemStyle: {
        color: item.color,
      },
    };
  });
};

const handleData3 = (module_2) => {
  let data = module_2.content;
  let top = module_2.top;
  option3.value.xAxis[0].data = data.map((item) => item.name);
  option3.value.legend.data = top.map((item, index) => {
    return {
      name: item.name,
      itemStyle: {
        color: item.color,
      },
    };
  });
  option3.value.series.forEach((item, index) => {
    item.name = top[index].name;
    item.data = data[index].statistics.map((item2, index2) => {
      return {
        value: item2.count,
        name: item2.name,
        label: {
          show: item2.count > 0 ? true : false,
          position: index == 2 ? "top" : "inside",
          color: "#fff",
          fontSize: 12,
        },
        itemStyle: {
          color: top[index].color,
        },
      };
    });
  });
};

const handleData5 = (module_3) => {
  console.log(module_3, "module_3");
  let data = module_3[0].statistics;
  console.log(data);
  option5.value.legend.data = data.map((item) => item.name);
  option5.value.series[0].name = module_3[0].name;
  option5.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      itemStyle: {
        color: item.color,
      },
    };
  });
};
const handleData6 = (module_3) => {
  console.log(module_3, "module_3");
  let data = module_3[1].statistics;
  console.log(data);
  option6.value.legend.data = data.map((item) => item.name);
  option6.value.series[0].name = module_3[1].name;
  option6.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      itemStyle: {
        color: item.color,
      },
    };
  });
};
const handleData7 = (module_3) => {
  console.log(module_3, "module_3");
  let data = module_3[2].statistics;
  console.log(data);
  option7.value.legend.data = data.map((item) => item.name);
  option7.value.series[0].name = module_3[2].name;
  option7.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      itemStyle: {
        color: item.color,
      },
    };
  });
};

// 测试饼图
const option1 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}个",
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  yAxis: {
    type: "value",
    splitNumber: 3,
    axisLabel: {
      color: "#fff",
      fontWeight: "bold",
      formatter: "{value}个",
    },
  },
  series: [
    {
      name: "公共厕所等级",
      data: [],
      type: "bar",
      barMaxWidth: 60,
      itemStyle: {
        color: "#409EFF",
      },
    },
  ],
});
const option3 = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
    data: [],
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        color: "#fff",
        fontWeight: "bold",
      },
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#fff",
        fontWeight: "bold",
        formatter: "{value}个",
      },
    },
  ],
  series: [
    {
      name: "",
      type: "bar",
      stack: "Add",
      emphasis: {
        focus: "series",
      },
      data: [],
    },
    {
      name: "",
      type: "bar",
      stack: "Add",
      emphasis: {
        focus: "series",
      },
      data: [],
    },
    {
      name: "",
      type: "bar",
      stack: "Add",
      emphasis: {
        focus: "series",
      },
      data: [],
    },
  ],
});

const option5 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    show: false,
    orient: "vertical",
    left: "right",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: "60%",
      center: ["40%", "40%"],
      data: [],
      label: {
        formatter: "{c}个",
        color: "#fff",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});

// 测试饼图
const option6 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    show: false,
    orient: "vertical",
    left: "right",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: "60%",
      center: ["40%", "40%"],
      data: [],
      label: {
        formatter: "{c}个",
        color: "#fff",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});

// 测试饼图
const option7 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    left: "right",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: "60%",
      center: ["40%", "40%"],
      data: [],
      label: {
        formatter: "{c}个",
        color: "#fff",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});

defineExpose({
  getData,
});
</script>
<style lang="scss" scoped>
@use "./index.scss" as *;
#map-box {
  height: 100%;
  width: 100%;
}

.pie-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  .pie-box-item {
    width: 32%;
    height: 100%;
    position: relative;
    .chart-title {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
      left: -50px;
      font-size: 14px;
      color: #fff;
      font-weight: bold;
    }
  }
}
</style>
